<template>
  <div class="box">
    <!-- 一楼 -->
    <div class="f1">
      <div class="center">
        <div class="f1_right">
          <div class="title">
            <div class="title_div">产品筛选<span>请选择额度/机构/类型</span></div>
            <div class="btn">
              <h4 @click="search">搜索</h4>
              <h6 @click="reset"><img src="@/assets/productList/reset.png" alt="" />重置</h6>
            </div>
          </div>
          <el-form :model="form" label-width="0.5208rem">
            <el-form-item label="机构名称">
              <el-input v-model="form.a" placeholder="请输入机构名称"></el-input>
            </el-form-item>
            <el-form-item label="机构类型">
              <el-select v-model="form.e">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="9" label="银行" value="YH"></el-option>
                <!-- <el-option key="2" label="保理" value="BL"></el-option>
                <el-option key="3" label="保险" value="BX"></el-option> -->
                <el-option key="4" label="担保" value="DB"></el-option>
                <el-option key="5" label="其他" value="ET"></el-option>
                <!-- <el-option key="6" label="小贷" value="XD"></el-option>
                <el-option key="7" label="消金" value="XJ"></el-option>
                <el-option key="8" label="信托" value="XT"></el-option>
                <el-option key="10" label="融资租赁" value="ZL"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input v-model="form.d" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select v-model="form.b">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="2" label="供应链类" value="SCF"></el-option>
                <el-option key="3" label="跨境类" value="SF"></el-option>
                <el-option key="4" label="普惠类" value="SME"></el-option>
                <el-option key="5" label="票据类" value="CAB"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="融资额度">
              <el-select v-model="form.c">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="2" label="300万以下" value="300"></el-option>
                <el-option key="3" label="500万以下" value="500"></el-option>
                <el-option key="4" label="1000万以下" value="1000"></el-option>
                <el-option key="5" label="2000万以下" value="2000"></el-option>
                <el-option key="6" label="2000万以上" value="2001"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="融资期限">
              <el-select v-model="form.f">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="2" label="6个月以下" value="6"></el-option>
                <el-option key="3" label="12个月以下" value="12"></el-option>
                <el-option key="4" label="12个月以上" value="16"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!--二楼 -->
    <div class="f2">
      <div class="content">
        <!-- <h4>产品列表</h4> -->
        <div class="matching">
          <div class="matching_left">
            <h4>
              共匹配到 <span>{{ total }}</span> 个产品
            </h4>
          </div>
          <div class="matching_right">
            <h6 style="color: #ff752c" @click="comprehensive">综合排序</h6>
            <h6>
              <span @click="paixuLists('creditamount', creditamount)">额度</span>
              <div>
                <template v-if="creditamount == 0">
                  <img
                    @click="paixuList('creditamount', 0, 0)"
                    src="@/assets/productList/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditamount', 0, 1)"
                    src="@/assets/productList/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="creditamount == 1">
                  <img
                    @click="paixuList('creditamount', 1, 0)"
                    src="@/assets/productList/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditamount', 1, 1)"
                    src="@/assets/productList/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
            <h6>
              <span @click="paixuLists(' orderradio', orderradio)"> 利率</span>
              <div>
                <template v-if="orderradio == 0">
                  <img
                    @click="paixuList(' orderradio', 0, 0)"
                    src="@/assets/productList/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList(' orderradio', 0, 1)"
                    src="@/assets/productList/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="orderradio == 1">
                  <img
                    @click="paixuList(' orderradio', 1, 0)"
                    src="@/assets/productList/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList(' orderradio', 1, 1)"
                    src="@/assets/productList/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
            <h6>
              <span @click="paixuLists('creditmonth', creditmonth)"> 期限</span>
              <div>
                <template v-if="creditmonth == 0">
                  <img
                    @click="paixuList('creditmonth', 0, 0)"
                    src="@/assets/productList/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditmonth', 0, 1)"
                    src="@/assets/productList/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="creditmonth == 1">
                  <img
                    @click="paixuList('creditmonth', 1, 0)"
                    src="@/assets/productList/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditmonth', 1, 1)"
                    src="@/assets/productList/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
          </div>
        </div>
        <!-- 二楼左侧下侧 -->
        <div class="f2-left-bottom" id="f2-left-bottom">
          <!-- 产品列表 -->
          <!-- 空状态 -->
          <div v-if="!data" class="null">
            <img src="@/assets/productList/暂无记录.png" alt="" />
            <span>暂无可申请的产品</span>
          </div>
          <!-- 关税保函 -->
          <template v-else>
            <!-- 跨境驿 -->
            <div class="f3_content_list" v-if="data">
              <div class="list" v-for="(item, index) in data" :key="index">
                <template v-if="item.productcode.substring(0, 3) == 'CAB'">
                  <div
                    v-if="item.producttype != ''"
                    class="tag"
                    :class="{
                      sptx: item.producttype == '商票贴现',
                      spzy: item.producttype == '商票质押',
                      yptx: item.producttype == '银票贴现',
                      cptx: item.producttype == '财票贴现',
                      ypzy: item.producttype == '银票质押',
                      cpzy: item.producttype == '财票质押'
                    }"
                  >
                    {{ item.producttype }}
                  </div>
                </template>
                <template v-if="item.productcode.substring(0, 3) == 'SF0'">
                  <div
                    v-if="item.showtype != '' && item.showtype != 'null' && item.showtype != null"
                    class="tag"
                    :class="{
                      sptx: item.showtype == '进口企业',
                      yptx: item.showtype == '出口企业'
                    }"
                  >
                    {{ item.showtype }}
                  </div>
                </template>
                <template v-if="item.productcode.substring(0, 3) == 'SCF'">
                  <div
                    v-if="item.show06 != '' && item.show06 != 'null' && item.show06 != null"
                    class="tag"
                    :class="{
                      sptx: item.show06 == '上游',
                      yptx: item.show06 == '下游'
                    }"
                  >
                    {{ item.show06 }}
                  </div>
                </template>
                <div class="list_left">
                  <img :src="item.show05" alt="" />
                  <p v-if="item.guarantee">
                    {{ item.guarantee }}
                  </p>
                </div>
                <div class="list_right">
                  <template v-if="item.productcode.substring(0, 3) == 'SCF'">
                    <h3 class="productName">
                      <p>{{ item.productname | getName }}</p>
                      <p style="font-size: 0.125rem">
                        {{ item.productname | getName2 }}
                      </p>
                    </h3>
                  </template>
                  <template v-else-if="item.productcode.substring(0, 2) == 'SF'">
                    <h3 class="productName">
                      <p>{{ item.productname }}</p>
                    </h3>
                  </template>
                  <template v-else>
                    <h3 class="productName">
                      {{ item.productname }}
                    </h3>
                  </template>

                  <div class="product-item-success">
                    <ul>
                      <li
                        v-show="item.amount != '' && item.amount != 'null' && item.amount != null"
                      >
                        <h4>{{ item.amount }}<span> </span></h4>
                        <h5>{{ item.showamount }}</h5>
                      </li>
                      <li v-show="item.month != '' && item.month != 'null' && item.month != null">
                        <h4>{{ item.month }}<span> </span></h4>
                        <h5>{{ item.showmonth }}</h5>
                      </li>
                      <li v-show="item.radio != '' && item.radio != 'null' && item.radio != null">
                        <h4>{{ item.radio }}<span></span></h4>
                        <h5>{{ item.showradio }}</h5>
                      </li>
                    </ul>
                  </div>
                  <div class="product-item-apply">
                    <h4 @click="goOfficialApplication(item.id, item)">立即申请</h4>
                    <div class="product-item-apply-btn">
                      <p @click="goApplicationDetails(item.id, item)">查看详情</p>
                      <p
                        v-if="item.productname == '关税保函' || item.productname == '税信保'"
                        @click="goApplication(item.id, item)"
                      >
                        预授信评估
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <a @click="changeHash('#box')" class="anim" v-show="ShowAnim">
      <img src="../../assets/productList/回到顶部.svg" alt="" />
      <p>回到顶部</p>
    </a>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="visible" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>为了保证体验更多的服务</p>
        <p>{{ title }}</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="visible = false">稍后</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgInvoice()">立即前往</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { myPostFetch, loginStatus } from '@/utils'
export default {
  data() {
    return {
      ShowAnim: false,
      visible: false,
      title: '',
      sort: '', //排序用排序名称
      paixu: '', //排序用 0 1
      creditamount: 0, // 额度
      orderradio: 0, // 利率
      creditmonth: 0, //  期限
      producttype: '',
      form: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: ''
      },
      pageSize: 99999,
      pageNum: 1,
      total: 0, //总条数
      data: null
    }
  },
  mounted() {
    let ProductParams = JSON.parse(sessionStorage.getItem('ProductParams'))
    if (ProductParams != null && ProductParams != 'null') {
      this.form.a = ProductParams.orgname
      this.form.b = ProductParams.producttype
      this.form.c = ProductParams.creditamount
      this.form.d = ProductParams.productname
      this.form.e = ProductParams.funder
      this.form.f = ProductParams.creditmonth
      this.sort = ProductParams.sort
      this.paixu = ProductParams.paixu
      this.creditamount = ProductParams.creditamountPX
      this.orderradio = ProductParams.orderradio
      this.creditmonth = ProductParams.creditmonthPX
    }
    this.selectkj()
    // 监听页面滚动事件
    window.addEventListener('scroll', this.scrolling)
    document.documentElement.scrollTop = 0
  },
  // 过滤器
  filters: {
    getName: function (value) {
      if (!value.indexOf('（') == -1) return value
      return value.split('（')[0]
    },
    getName2: function (value) {
      var resu = ''
      if (value.indexOf('（') !== -1) {
        resu = '（' + value.split('（')[1]
      }
      return resu
    }
  },
  methods: {
    scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 1500) {
        this.ShowAnim = true
      } else {
        this.ShowAnim = false
      }
    },
    // 回到顶部
    changeHash(idName) {
      document.querySelector(idName).scrollIntoView(true)
    },
    // 排序 参数1:点击的是哪个模块；参数2:模块值，0上箭头可点击，下箭头不可点击；1上箭头不可点击，下箭头可点击，；参数3：排序值，0正序，1倒序
    paixuList(sort, order, paixu) {
      // 额度
      if (sort == 'creditamount' && order == 0 && paixu == 1) {
        return
      } else if (sort == 'creditamount' && order == 0 && paixu == 0) {
        this.creditamount = 1
        this.paixu = 'a'

        this.sort = sort
        this.setItem()
        this.selectkj()
      } else if (sort == 'creditamount' && order == 1 && paixu == 0) {
        return
      } else if (sort == 'creditamount' && order == 1 && paixu == 1) {
        this.creditamount = 0
        this.sort = sort
        this.paixu = 'd'
        this.setItem()
        this.selectkj()
      }
      // 利率
      if (sort == ' orderradio' && order == 0 && paixu == 1) {
        return
      } else if (sort == ' orderradio' && order == 0 && paixu == 0) {
        this.orderradio = 1
        this.paixu = 'a'

        this.sort = sort
        this.setItem()
        this.selectkj()
      } else if (sort == ' orderradio' && order == 1 && paixu == 0) {
        return
      } else if (sort == ' orderradio' && order == 1 && paixu == 1) {
        this.orderradio = 0
        this.sort = sort
        this.paixu = 'd'
        this.setItem()
        this.selectkj()
      }
      // 期限
      if (sort == 'creditmonth' && order == 0 && paixu == 1) {
        return
      } else if (sort == 'creditmonth' && order == 0 && paixu == 0) {
        this.creditmonth = 1
        this.paixu = 'a'
        this.sort = sort
        this.setItem()
        this.selectkj()
      } else if (sort == 'creditmonth' && order == 1 && paixu == 0) {
        return
      } else if (sort == 'creditmonth' && order == 1 && paixu == 1) {
        this.creditmonth = 0
        this.sort = sort
        this.paixu = 'd'
        this.setItem()
        this.selectkj()
      }
    },
    paixuLists(sort, paixu) {
      if (sort == 'creditamount') {
        paixu == 0
          ? ((this.creditamount = 1), (this.paixu = 'a'), (this.sort = sort))
          : ((this.creditamount = 0), (this.paixu = 'd'), (this.sort = sort))
        this.setItem()
        this.selectkj()
      } else if (sort == ' orderradio') {
        paixu == 0
          ? ((this.orderradio = 1), (this.paixu = 'a'), (this.sort = sort))
          : ((this.orderradio = 0), (this.paixu = 'd'), (this.sort = sort))
        this.setItem()
        this.selectkj()
      } else if (sort == 'creditmonth') {
        paixu == 0
          ? ((this.creditmonth = 1), (this.paixu = 'a'), (this.sort = sort))
          : ((this.creditmonth = 0), (this.paixu = 'd'), (this.sort = sort))
        this.setItem()
        this.selectkj()
      }
    },
    comprehensive() {
      this.sort = ''
      this.paixu = ''
      this.creditamount = 0
      this.orderradio = 0
      this.creditmonth = 0
      this.selectkj()
    },
    // 重置
    reset() {
      this.form.a = ''
      this.form.b = ''
      this.form.c = ''
      this.form.d = ''
      this.form.e = ''
      this.form.f = ''
      sessionStorage.removeItem('ProductParams')
      this.comprehensive()
    },

    // 定时器
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    },
    search() {
      this.pageNum = 1
      this.selectkj()
      this.setItem()
    },
    // 保存至本地
    setItem() {
      let { a, b, c, d, e, f } = this.form
      let ProductParams = {
        creditamount: c,
        creditmonth: f,
        funder: e,
        orgname: a,
        productname: d,
        producttype: b,
        sort: this.sort,
        paixu: this.paixu,
        creditamountPX: this.creditamount,
        orderradio: this.orderradio,
        creditmonthPX: this.creditmonth
      }
      sessionStorage.setItem('ProductParams', JSON.stringify(ProductParams))
    },
    // 获取产品列表
    async selectkj() {
      const loading = this.$loading({
        lock: true,
        text: '拼命加载中',
        background: 'rgba(255, 255, 255, .8)',
        target: document.querySelector('#f2-left-bottom')
      })
      let paramet = {
        creditamount: this.form.c,
        creditmonth: this.form.f,
        funder: this.form.e,
        orgname: this.form.a,
        productname: this.form.d,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        producttype: this.form.b,
        sort: this.sort,
        paixu: this.paixu
      }
      let url = '/api/products/selectProductSub'
      let { data } = await myPostFetch(url, paramet)
      if (data == 'null' || data == null) return loading.close()
      this.data = data.list
      let total = data.total
      this.total = total
      if (data.list.length == 0) {
        this.data = null
        loading.close()
      } else {
        this.data = data.list
        loading.close()
      }
    },
    // ------------------------跳转至申请流程----------------------------
    // 预授信
    async goApplication(id, item) {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      sessionStorage.setItem('productcode', item.productcode)
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let res = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (res.code == 10000) {
          this.$Message.error(res.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        localStorage.clear()
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        localStorage.setItem('productcode', productcode)
        localStorage.setItem('productname', productname)
        localStorage.setItem('id', id)
        if (item.productname == '关税保函') {
          // 跳转至关税保函预授信申请页
          this.$router.push(`/gsbhApplocation?a=${1}`)
        } else if (item.productname == '税信保') {
          // 跳转至税信保预授信申请页
          this.$router.push(`/sxbApplocation?a=${1}`)
        }
        // this.setTime()
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 跳转至正式申请页面
    async goOfficialApplication(id, item) {
      let code = item.productcode.substring(0, 3)
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      sessionStorage.setItem('productcode', item.productcode)
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let res = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (res.code == 10000) {
          this.$Message.error(res.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        localStorage.clear()
        const loading = this.$loading({
          lock: true,
          text: '拼命加载中',
          background: 'rgba(255, 255, 255, .8)',
          target: document.querySelector('#body')
        })

        // 跨境类
        if (code == 'SF0') {
          if (
            item.productcode == 'SF018001' ||
            item.productcode == 'SF018002' ||
            item.productcode == 'SF019001' ||
            item.productcode == 'SF003001'
          ) {
            let productcode = item.productcode
            let productname = item.productname
            let id = item.id
            localStorage.setItem('productcode', productcode)
            localStorage.setItem('productname', productname)
            localStorage.setItem('id', id)
            loading.close()
            this.$router.push(`/newProductApply`)
            return
          }
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          localStorage.setItem('productcode', productcode)
          localStorage.setItem('productname', productname)
          localStorage.setItem('id', id)
          if (item.productname == '关税保函' || item.productname == '关税保付保函') {
            // 跳转至关税保函正式申请页
            this.$router.push(`/gsbhzsApplocation`)
            loading.close()
          } else if (item.productname == '税信保') {
            // 跳转至税信保正式申请页
            this.$router.push(`/sxbCreditExtension`)
            loading.close()
          } else if (item.productname == '关税E保') {
            // 跳转至关税E保正式申请页
            this.$router.push(`/gsebApplocation`)
            loading.close()
          } else if (item.productname == '关税保证保险') {
            // 跳转至关税保证保险正式申请页
            this.$router.push(`/gsbzbxApplocation`)
            loading.close()
          } else if (item.productname == '关税履约保证保险') {
            // 跳转至关税履约保证保险正式申请页
            this.$router.push(`/gslybzbxApplocation`)
            loading.close()
          }
        }
        // 商票类
        else if (code == 'CAB') {
          let productcode = item.productcode
          let productname = item.productname
          let producttype = item.producttype
          let id = item.id
          let radio = item.radio
          if (
            item.producttype == '商票贴现' ||
            item.producttype == '银票贴现' ||
            item.producttype == '财票贴现' ||
            item.producttype == '财票质押' ||
            item.producttype == '银票质押'
          ) {
            this.$store.commit('updataApplyProductcode', productcode)
            this.$store.commit('updataApplyProductname', productname)
            this.$store.commit('updataApplyId', id)
            this.$store.commit('updataApplyRadio', radio)
            localStorage.setItem('producttype', producttype)
            this.$router.push('/sptxApplication')
            loading.close()
          } else if (item.producttype == '商票质押') {
            this.$store.commit('updataApplyProductcode', productcode)
            this.$store.commit('updataApplyProductname', productname)
            this.$store.commit('updataApplyId', id)
            this.$store.commit('updataApplyRadio', radio)
            this.$router.push('/spzyApplication')
            loading.close()
          }
        } // 商链类
        else if (code == 'SCF') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          loading.close()
          this.$router.push('/sjghdApplication')
        }
        // 普惠类
        else if (code == 'SME') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          // 中标贷
          if (item.productcode == 'SME006001') {
            loading.close()
            this.$router.push('/ZBDApply')
          }
          // 普惠数字贷
          else if (item.productcode == 'SME008001') {
            loading.close()
            this.$router.push('/phszdApply')
          }
          // 产业普惠贷
          else if (item.productcode == 'SME009001') {
            loading.close()
            this.$router.push('/cyphdApply')
          }
          // 工程履约保函
          else if (item.productcode == 'SME007001') {
            loading.close()
            this.$router.push('/gclybhApply')
          }
        }
        this.setTime()
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 跳转产品详情页
    goApplicationDetails(id, item) {
      let code = item.productcode.substring(0, 3)
      localStorage.clear()

      // 商票类
      if (code == 'CAB') {
        let productcode = item.productcode
        let productname = item.productname
        let producttype = item.producttype
        let id = item.id
        let radio = item.radio
        if (
          item.producttype == '商票贴现' ||
          item.producttype == '银票贴现' ||
          item.producttype == '财票贴现' ||
          item.producttype == '财票质押' ||
          item.producttype == '银票质押'
        ) {
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          localStorage.setItem('producttype', producttype)
          this.$router.push('/sptxApplication?row=2')
        } else if (item.producttype == '商票质押') {
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          this.$router.push('/spzyApplication?row=2')
        }
      }
      // 跨境类
      else if (code == 'SF0') {
        if (
          item.productcode == 'SF018001' ||
          item.productcode == 'SF018002' ||
          item.productcode == 'SF019001' ||
          item.productcode == 'SF003001'
        ) {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          localStorage.setItem('productcode', productcode)
          localStorage.setItem('productname', productname)
          localStorage.setItem('id', id)
          this.$router.push(`/newProductApply?row=2`)
          return
        }
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        localStorage.setItem('productcode', productcode)
        localStorage.setItem('productname', productname)
        localStorage.setItem('id', id)
        if (item.productname == '关税保函' || item.productname == '关税保付保函') {
          // 跳转至关税保函正式申请页
          this.$router.push(`/gsbhzsApplocation?row=2&`)
        } else if (item.productname == '税信保') {
          // 跳转至税信保正式申请页
          this.$router.push(`/sxbCreditExtension?row=2`)
        } else if (item.productname == '关税E保') {
          // 跳转至关税E保正式申请页
          this.$router.push(`/gsebApplocation?row=2`)
        } else if (item.productname == '关税保证保险') {
          // 跳转至关税保证保险正式申请页
          this.$router.push(`/gsbzbxApplocation?row=2`)
        } else if (item.productname == '关税履约保证保险') {
          // 跳转至关税履约保证保险正式申请页
          this.$router.push(`/gslybzbxApplocation?row=2`)
        }
      }
      // 商链类
      else if (code == 'SCF') {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$router.push('/sjghdApplication?row=2')
      }
      // 普惠驿
      else if (code == 'SME') {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        // 中标贷
        if (item.productcode == 'SME006001') {
          this.$router.push('/ZBDApply?row=2')
        }
        // 普惠数字贷
        else if (item.productcode == 'SME008001') {
          this.$router.push('/phszdApply?row=2')
        }
        // 工程履约保函
        else if (item.productcode == 'SME007001') {
          this.$router.push('/gclybhApply?row=2')
        }
        // 产业普惠贷
        else if (item.productcode == 'SME009001') {
          this.$router.push('/cyphdApply?row=2')
        }
      }

      this.setTime()
    },
    // 跳转至登录或者认证
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      let loginState = sessionStorage.getItem('loginState')
      this.visible = false
      if (!loginState) {
        this.$router.push('/login')
        this.setTime()
        return
      }
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTime()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTime()
        return
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: url(@/assets/productList/组080.png) no-repeat;
    background-size: cover;
    // margin-bottom: 0.0521rem;
    .center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 8.4375rem;
      height: 3.5938rem;
      .f1_right {
        box-sizing: border-box;
        width: 2.8646rem;
        height: 2.1875rem;
        padding: 0.0521rem;
        background-color: #fff;
        box-shadow: 0px 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);

        .title {
          box-sizing: border-box;
          padding: 0 0.1302rem;
          display: flex;
          font-size: 0.0833rem;
          color: #000000;
          margin: 0.0521rem 0 0.1302rem;
          .title_div {
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 0.1038rem;
            span {
              font-size: 0.0625rem;
              color: #666;
              margin-left: 0.0521rem;
            }
          }

          .btn {
            display: flex;
            align-items: center;
            // margin-top: 0.1042rem;
            h4 {
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 0.7292rem;
              height: 0.1563rem;
              border-radius: 0.0104rem;
              background: #0a7be0;
              opacity: 1;
              border-radius: 0.0208rem;
              font-size: 0.0729rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 0.2083rem;
              color: #ffffff;
              opacity: 1;
              margin-right: 0.0781rem;
            }
            h6 {
              cursor: pointer;
              display: flex;
              align-items: center;
              font-size: 0.0729rem;
              color: #a2a2a2;
              img {
                width: 0.0677rem;
                margin-right: 0.026rem;
              }
            }
          }
        }
      }
    }
  }
  .f2 {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0.0052rem 0.0521rem 0px rgba(196, 196, 196, 0.15);
    border-radius: 0.0313rem;
    background-color: #f5f7fa;
    // margin-top: 0.2083rem;
    .content {
      margin: 0 auto;
      width: 8.4375rem;
      margin-bottom: 0.2083rem;
      .matching {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.2448rem;
        margin-top: 0.1042rem;
        .matching_left {
          h4 {
            font-size: 0.0938rem;
            font-weight: 600;
            color: #000000;
          }
          span {
            color: #0a7be0;
          }
        }
        .matching_right {
          display: flex;
          // align-items: center;
          // height: 100%;
          h6 {
            display: flex;
            font-size: 0.0833rem;
            font-weight: 600;
            color: #646464;
            margin-left: 0.1042rem;
            cursor: pointer;
            span {
              font-size: 0.0833rem;
              font-weight: 600;
              color: #646464;
            }
            div {
              height: 80%;
              display: flex;
              justify-content: space-evenly;
              flex-direction: column;
              margin-left: 0.0208rem;
              img {
                width: 0.0729rem;
                height: 0.0729rem;
              }
            }
          }
        }
      }
      // 二楼左侧下部
      .f2-left-bottom {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        // box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
        border-radius: 0.0313rem;
        .title {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 0.1302rem;
          margin: 0.0521rem 0.0781rem 0.0521rem 0.0781rem;
          h5 {
            width: 0.0156rem;
            height: 0.1094rem;
            margin-right: 0.0573rem;
            background-color: #0a7be0;
          }
          h3 {
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #0a7be0;
          }
        }
        // 空状态
        .null {
          box-sizing: border-box;
          padding-bottom: 0.1302rem;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 80%;
          margin-top: 0.1042rem;
          img {
            width: 1.6979rem;
            height: 1.1042rem;
          }
          span {
            position: absolute;
            top: 1.0156rem;
            font-size: 0.0729rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #b3b3b3;
          }
          .btn {
            width: 0.7865rem;
            height: 0.1615rem;
            font-size: 0.0781rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #0a7be0;
            text-align: center;
            border: 0.0052rem solid #0a7be0;
            border-radius: 0.0208rem;
            line-height: 0.1615rem;
            margin-top: 0.2083rem;
            cursor: pointer;
          }
        }
        // 产品列表
        .f3_content_list {
          margin-top: 0.1042rem;
          .list {
            display: flex;
            position: relative;
            box-sizing: border-box;
            padding: 0.1042rem 0.2563rem 0.1042rem 0.4167rem;
            width: 8.4375rem;
            height: 1.1458rem;
            background: #ffffff;
            box-shadow: 0px 0.0469rem 0.0938rem 0px rgba(207, 207, 207, 0.22);
            border-radius: 0.0208rem;
            margin-bottom: 0.1563rem;
            .tag {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0px;
              left: 0px;
              width: 0.5104rem;
              height: 0.125rem;
              background: #3f6ef2;
              border-radius: 0.0208rem 0px 0px 0px;
              font-size: 0.0833rem;
              font-weight: 400;
              color: #ffffff;
              &.sptx {
                background: #3f6ef2;
              }
              &.spzy {
                background: #ff6060;
              }
              &.yptx {
                background: #e8903c;
              }
              &.cptx {
                background: #13b5b1;
              }
              &.ypzy {
                background: #ad5afa;
              }
              &.cpzy {
                background: #20b5da;
              }
            }
            .list_left {
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 1.6406rem;
              height: 0.9375rem;
              border-right: 0.0052rem solid #e5e5e5;
              img {
                width: 1.3021rem;
              }
              p {
                width: 1.3021rem;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                padding: 0 5px;
                font-size: 0.0833rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                margin-top: 0.0521rem;
                background: #edf2ff;
                color: #3f6ef2;
              }
            }
            .list_right {
              display: flex;
              align-items: center;
              // justify-content: space-between;
              flex: 1;
              width: 0.7813rem;
              height: 0.9375rem;
              margin-left: 0.2573rem;
              .productName {
                position: relative;
                text-align: center;
                width: 1.5625rem;
                font-size: 0.1406rem;
                font-weight: 500;
                color: #000000;
                .tabs {
                  position: absolute;
                  top: 0;
                  right: -0.1302rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 0.2604rem;
                  height: 100%;
                  font-size: 0.0625rem;
                  color: #fff;
                  p {
                    width: 0.2604rem;
                    height: 0.1042rem;
                    background: #0444f3;
                  }
                }
              }
              .product-item-success {
                ul {
                  display: flex;
                  justify-content: space-around;
                  li {
                    width: 1.0417rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: 0.3646rem;
                    h4 {
                      font-size: 0.1563rem;
                      font-weight: 400;
                      color: #e8903c;
                      span {
                        font-size: 0.0833rem;
                      }
                    }
                    h5 {
                      font-size: 0.0833rem;
                      font-weight: 400;
                      color: #858585;
                    }
                  }
                }
              }
              .product-item-apply {
                position: absolute;
                right: 0.2604rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                height: 0.4479rem;
                cursor: pointer;
                h4 {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 0.8333rem;
                  height: 0.2188rem;
                  background: linear-gradient(-90deg, #5d98f8, #4b5af8);
                  box-shadow: 0px 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);
                  border-radius: 0.0208rem;
                  font-size: 0.0938rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #ffffff;
                  cursor: pointer;
                }

                p {
                  width: 0.3385rem;
                  height: 0.1302rem;
                  font-size: 0.0833rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #738bd0;
                  border-bottom: 0.0052rem solid #738bd0;
                  cursor: pointer;
                }
                .product-item-apply-btn {
                  width: 1.1rem;
                  display: flex;
                  justify-content: space-around;
                  p {
                    text-align: center;
                    width: 0.4948rem;
                    height: 0.1302rem;
                    font-size: 0.0833rem;
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    // text-decoration: underline;
                    color: #738bd0;
                    border-bottom: 1px solid #738bd0;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .anim {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    @media only screen and (min-width: 0px) and (max-width: 1024px) {
      display: none;
    }
    position: fixed;
    top: 65vh;
    right: 0;
    width: 0.5208rem;
    height: 0.5208rem;
    background: #ffffff;
    box-shadow: 0.0208rem 0px 0.0938rem 0px #58759d;
    border-radius: 50%;
    opacity: 0.9;
    img {
      width: 0.1667rem;
    }
    p {
      font-size: 0.0729rem;
      margin-top: 0.0417rem;
    }
  }
}
// 弹出框
.dialog-center {
  text-align: center;
  overflow: hidden;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #4d4d4d;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    z-index: 9999;
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0.1563rem 0.1042rem;
  color: #606266;
  font-size: 0.0729rem;
  word-break: break-all;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 46px;
  padding: 0.1042rem 0.1042rem 0.0521rem;
  border-bottom: 0.0052rem solid #dddbdb;
}
::v-deep .el-dialog__title {
  font-size: 0.1042rem;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f6df1;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 2.1354rem;
  height: 0.1875rem;
  font-size: 0.0781rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
  line-height: 0.1354rem !important;
}
::v-deep .el-form-item {
  margin-bottom: 0.0781rem;
}
::v-deep .el-form-item__content {
  font-size: 0.0781rem;
}
::v-deep .el-form-item__content {
  line-height: 0.1823rem;
}
::v-deep .el-form-item__label {
  line-height: 0.1823rem;
  font-size: 0.0781rem;
}
::v-deep .el-select .el-input .el-select__caret {
  font-size: 0.0781rem;
  height: 0.0938rem;
}
</style>
